<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>端API</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<style>
			body, html {
				background-color: #F2F2F2;
			}
			.border-top, .border-bottom {
				position: relative;
			}
			.border-top:before, .border-bottom:after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				background: #DADDE0;
				height: 1px;
			}
			.border-bottom:after {
				top: auto;
				bottom: 0;
			}
			.tabbar {
				width: 100%;
				margin-top: 200px;
				background-color: #F2F2F2;
				z-index: 99;
			}
			.col {
				text-align: center;
				height: 40px;
				line-height: 40px;
			}
			.indicator {
				height: 2px;
				background-color: #6ab494;
				margin-top: -3px;
				display: none;
			}
			.active {
				display: block;
			}
			li img {
				width: 120px;
				height: 120px;
				padding: 5px;
			}
			.item-right {
				margin-top: 10px;
				margin-bottom: 10px;
			}
			.item-name {
				line-height: 25px;
				font-size: 18px;
				font-weight: bold;
			}
			.item-price {
				color: #6AB494;
				font-size: 20px;
			}
			.item-address {
				line-height: 15px;
				color: #A5A5A5;
				font-size: 12px;
			}
			span {
				color: #A5A5A5;
				font-size: 12px;
				font-weight: normal;
			}
			footer {
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				font-size: 12px;
				color: #909090;
			}
		</style>
	</head>
	<body>
		<div class="tabbar flex-wrap border-bottom" id="tabbar">
			<div class="col flex-con" id="col1" onclick="tabswitch(1)">
				美食 <div class="indicator active" id="indicator1"></div>
			</div>
			<div class="col flex-con" id="col2" onclick="tabswitch(2)">
				KTV <div class="indicator" id="indicator2"></div>
			</div>
		</div>
		<div id="content">
			<ul id="list"></ul>
		</div>
		<footer id="load_more">
			加载中
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/sha1.js"></script>
	<script type="text/javascript">
		apiready = function() {
			setCustomRefreshHeader();
			scrollPicture();
			getContents(true);
			loadMore();
		};
		function setCustomRefreshHeader() {
			api.setCustomRefreshHeaderInfo({
				bgColor : '#D9D9D9',
				image : {
					icon : 'widget://image/tab_icon_1_foucsed.png',
					borderColor : '#6ab494'
				}
			}, function() {
				getContents(false);
			});
		}

		function scrollPicture() {
			var UIScrollPicture = api.require('UIScrollPicture');
			UIScrollPicture.open({
				rect : {
					x : 0,
					y : 0,
					w : api.winWidth,
					h : 200
				},
				data : {
					paths : ['widget://image/coffee.png', 'widget://image/ktv.jpg', 'widget://image/flower.jpg']
				},
				styles : {
					indicator : {
						align : 'center',
						color : '#FFFFFF',
						activeColor : '#DA70D6'
					}
				},
				contentMode : 'scaleToFill',
				interval : 3,
				fixedOn : api.frameName,
				loop : true,
				fixed : false
			}, function(ret, err) {
				if (ret) {
					//alert(JSON.stringify(ret));
				} else {
					//alert(JSON.stringify(err));
				}
			});
		}


		window.onscroll = function() {
			var tabbar = $api.byId("tabbar");
			var content = $api.byId("content");
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if (scrollTop < 200 && tabbar.style.position == 'fixed') {
				tabbar.style.position = 'relative';
				tabbar.style.marginTop = 200 + 'px';
				content.style.marginTop = 5 + 'px';
			} else if (window.scrollY >= 200 && tabbar.style.position != 'fixed') {
				tabbar.style.marginTop = 0 + 'px';
				tabbar.style.position = 'fixed';
				tabbar.style.top = 0 + 'px';
				content.style.marginTop = 245 + 'px';
			}
		}
		function changePos(id, height) {
			var obj = document.getElementById(id);
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			if (scrollTop < height) {
				obj.style.position = 'static';
			} else {
				obj.style.position = 'fixed';
			}
		}

		function tabswitch(index) {
			for (var i = 1; i <= 2; i++) {
				var indicator = $api.byId('indicator' + i);
				if (index == i) {
					$api.addCls(indicator, "active");
					//fillListView(i)
					listScroll();
				} else {
					$api.removeCls(indicator, "active");
				}
			}
		}

		function listScroll() {
			var scrollY = window.scrollY;
			if (scrollY >= 200) {
				window.scrollTo(0, 200);
			}
		}

		var isLoadding = false;
		var skip = 0;
		var listStr = "";
		var str = "";
		function imgCache(i, isLoadMore) {
			if (i < data.length) {
				api.imageCache({
					url : data[i].img_url
				}, function(ret, err) {
					if (ret) {
						str += '<li class="flex-wrap border-top border-bottom">';
						str += '<img tapmode src="' + ret.url + '"/>';
						str += '<div class="item-right flex-wrap flex-vertical flex-con">';
						str += '<div class="item-name flex-con">' + data[i].shop_name  + '&nbsp' + '<span>' + data[i].distance + '</span>' + '</div>';
						str += '<div class="item-address flex-con">' + '[' + data[i].address + ']' + data[i].tips + '</div>';
						str += '<div class="item-price flex-con">' + '¥' + data[i].price + '&nbsp' + '<span>已售' + data[i].sellNums + '</span>' + '</div>';
						str += '</div>';
						str += '</li>';
						imgCache(i + 1, isLoadMore);
					} else {
						imgCache(i + 1, isLoadMore);
					}
				});
			} else {
				if (data.length > 0) {
					api.hideProgress();
					if (isLoadMore) {
						listStr += str;
					} else {
						listStr = str + listStr;
					}
					$api.html(list, listStr);
					api.parseTapmode();
					isLoadding = false;
				}
			}
		}

		var skip = 0;
		function getContents(isLoadMore) {
			if (isLoadMore) {
				api.showProgress({
				});
			}
			var filter = {
				"where" : {},
				"skip" : skip,
				"limit" : 4
			};
			var now = Date.now();
			var appKey = SHA1("A6933493896767" + "UZ" + "234547A6-94F5-80F4-E597-A6F8BEC79719" + "UZ" + now) + "." + now;
			api.ajax({
				"url" : "https://d.apicloud.com/mcm/api/shops?filter=" + $api.jsonToStr(filter),
				method : 'get',
				headers : {
					"X-APICloud-AppId" : "A6933493896767",
					"X-APICloud-AppKey" : "2cb9dcd66fb476bcebd18136610a98c1c30b3e4d.1490249001160"
				}
			}, function(ret, err) {
				if (!isLoadMore) {
					api.refreshHeaderLoadDone();
				}
				if (ret) {
					if (ret.length > 0) {
						skip += 4;
						paserContents(ret, isLoadMore);
					} else {
						api.hideProgress();
						$api.html(load_more, "没有更多了");
					}
				} else {
					alert("获取信息失败");
				}
			});
		}

		var data;
		function paserContents(ret, isLoadMore) {
			data = ret;
			str = ""
			imgCache(0, isLoadMore);
		}

		function loadMore() {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0
				}
			}, function(ret, err) {
				if (!isLoadding) {
					isLoadding = true;
					getContents(true);
				}
			});
		}
	</script>
</html>